<template>
  <div class="steps">
    <div class="steps-content">
      <slot></slot>
    </div>
    <div class="process-line" :style="{width: processLineWidth}"></div>
  </div>
</template>

<script>
export default {
  name: 'TomsSteps',
  props: {
    active: Number
  },
  data() {
    return {
      steps: []
    }
  },
  computed: {
    processLineWidth() {
      // const active = this.$parent.active
      if (this.active > this.steps.length) {
        return '100%'
      }
      return (
        Math.floor(((this.active - 1) / (this.steps.length - 1)) * 100) + '%'
      )
    }
  },
  watch: {
    steps(steps) {
      steps.forEach((child, index) => {
        child.index = index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.steps {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  @apply pb-5 mb-4 mt-4;

  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 0.2em;
    background-color: #eef2f7;
  }
}

.steps-content {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.process-line {
  display: block;
  position: absolute;
  width: 50%;
  height: 0.2em;
  background-color: #3688fc;
}
</style>
